<template>
  <div class="home">
    <div class="tabs-section">
      <button class="tab active">My files</button>
      <button class="tab">Classes</button>
    </div>

    <div class="widgets-section">
      <h2>Widgets</h2>
      <div class="widgets-grid">
        <!-- 浏览卡片 -->
        <div class="widget-card browse-card">
          <div class="widget-header">
            <button class="widget-tab active">Studying</button>
            <button class="widget-tab">Recent</button>
          </div>
          <div class="widget-content">
            <div class="search-icon-wrapper">
              <SearchIcon class="search-icon" />
            </div>
            <p class="browse-text">Browse over 4 million notes & flashcards</p>
          </div>
        </div>
        <div class="widget-card profile-card">
          <Calendar />
        </div>

        <!-- 用户资料卡片 -->
        <div class="widget-card profile-card" style="
    padding: 0;
">
          <div class="profile-banner"></div>
          <div class="profile-content">
            <div class="avatar">yu</div>
            <div class="user-info">
              <h3>yu liang</h3>
              <p class="user-meta">@gsliang | Joined 2/6/25</p>
              <div class="level-info">
                <span>Level 0</span>
                <div class="progress-bar">
                  <div class="progress" style="width: 10%"></div>
                </div>
                <span>5/50 XP</span>
              </div>
              <button class="view-badges">View badges</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="files-section">
      <div class="files-header">
        <div class="left-actions">
          <button class="create-btn">
            Create new
          </button>
          <button class="create-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-plus"><path d="M12 10v6"></path><path d="M9 13h6"></path><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path></svg>
          </button>
          <button class="create-btn">
            Select multiple
          </button>
        </div>
        <div class="right-actions">
          <button class="sort-btn">
            Last Updated
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down"><path d="M12 5v14"></path><path d="m19 12-7 7-7-7"></path></svg>
          </button>
          <button class="filter-btn" @click="showFilterDropdown = !showFilterDropdown">
            See saved or trash
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"><path d="M6 9l6 6 6-6"></path></svg>
            <div v-if="showFilterDropdown" class="filter-dropdown">
      <ul>
        <li>Home</li>
        <li>Saved</li>
        <li>Trash</li>
      </ul>
    </div>
          </button>
          <button class="filter-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
          </button>
        </div>
      </div>
      <h2>Your Files</h2>
      <div class="files-grid">
        <div class="file-card" v-for="(item, index) in 8" :key="index" @mouseover="hoverCard = index" @mouseleave="hoverCard = null">
          <div class="file-header">
            <h3>cursor</h3>
            <button class="more-btn" @click="toggleDropdown(index)">
              <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
            </button>
            <div v-if="activeDropdown === index" class="dropdown">
              <ul>
                <li>Pin</li>
                <li>Duplicate</li>
                <li>Move to</li>
                <li>Rename</li>
                <li>Get link</li>
                <li>Open in new tab</li>
                <li>Edit tags</li>
                <li class="danger">Trash this note</li>
              </ul>
            </div>
          </div>
          <div class="file-meta">
            <span>📝 Flashcard (4)</span>
            <span>👥 Studied by 0 people</span>
          </div>
          <p class="file-time">4 minutes ago</p>
          <div class="file-footer">
            <span class="lock-icon">🔒</span>
            <div class="right-footer">
              <button class="preview-btn" @click="showPreview = true">Preview</button>
              <span class="pin-icon">📌</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <PreviewModal :visible="showPreview" @close="showPreview = false" />

    
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Calendar from '@/components/Calendar.vue';
import SearchIcon from '@/components/icons/SearchIcon.vue';
import PreviewModal from '@/components/PreviewModal.vue';

const activeDropdown = ref(null);
const hoverCard = ref(null);
const showPreview = ref(false);
const showFilterDropdown = ref(false);

const toggleDropdown = (index) => {
  activeDropdown.value = activeDropdown.value === index ? null : index;
};
</script>

<style scoped>
.home {
  width: 1200px;
  margin-left: 120px;

  padding: 24px;
  background-color: #1a1a1a;
  color: white;
}

.files-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.file-card {
  background-color: #2a2a2a;
  border-radius: 8px;
  padding: 16px;
  width: calc(33.333% - 16px);
  box-sizing: border-box;
  position: relative;
  transition: background-color 0.3s;
}

.file-card:hover {
  background-color: #333;
}

.file-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.file-meta {
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 4px;
  color: #aaa;
}
.file-meta span{
  background-color: #1a1a1a;

}
.file-time {
  color: #aaa;
}

.file-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.lock-icon {
  color: #aaa;
}

.right-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-btn {
  background-color: #444;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.pin-icon {
  color: #aaa;
}

.more-btn {
  background: none;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: absolute;
  top: 40px;
  right: 0;
  background-color: #2a2a2a;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.dropdown ul {
  list-style: none;
  padding: 10px;
  margin: 0;
}

.dropdown li {
  padding: 8px 12px;
  cursor: pointer;
  color: white;
}

.dropdown li:hover {
  background-color: #444;
}

.dropdown .danger {
  color: red;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #2a2a2a;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.close-btn {
  background-color: #444;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 10px;
}

.filter-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #2a2a2a;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.filter-dropdown ul {
  list-style: none;
  padding: 10px;
  margin: 0;
}

.filter-dropdown li {
  padding: 8px 12px;
  cursor: pointer;
  color: white;
}

.filter-dropdown li:hover {
  background-color: #444;
}
.filter-btn{
  position: relative;
}

.profile-card {
  text-align: center;
}

.avatar {
  width: 50px;
  height: 50px;
  background-color: #e91e63;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 18px;
  color: white;
}

.user-info {
  margin-top: 10px;
}

.user-info h3,
.user-info p {
  margin: 5px 0;
}

.level-info {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.progress-bar {
  width: 80%;
  background-color: #333;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 10px;
}

.progress {
  height: 10px;
  background-color: #9c27b0;
  border-radius: 10px;
}

.view-badges {
  margin-top: 10px;
  padding: 5px 10px;
  border: 1px solid #9c27b0;
  border-radius: 5px;
  background-color: transparent;
  color: #9c27b0;
  cursor: pointer;
}
</style>